<template>
	<view class="all">
		
		<view class="mask" v-show="maskShow"></view><!-- 遮罩层。。 -->
		<view class="top">
			<image class="back" @click="back" src="@/static/back.png" mode="scaleToFill"></image>

			<text class="text" @click="part">设备详情</text>
		</view>
		<view class="message">
			<view class="uni-common-mt">
				<view class="uni-form-item ">
					<text class="titles">设备名称:</text>
					<text class="numbers">(001)</text>
				</view>
				<view class="uni-form-item">
					<text class="title">设备号:</text>
					<text class="numbers">EDH3877848</text>
				</view>
				<view class="uni-form-item ">
					<text class="title">地理位置:</text>
					<text class="numbers">北京市朝阳区建外SOHO东区B座</text>
				</view>
				<view class="uni-form-item">
					<text class="title">备注信息:</text>
					<text class="numbers">信息内容…</text>
				</view>
			</view>
			<!-- 弹窗。。 -->
			<view class="tanChuang" v-if="oneisShow"> 
				<view class="t-top">
					系统提醒
				</view>
				<view class="t-main">
					确定要对XXX设备进行
					<text>
						XXXXX操作吗？
					</text>
				</view>
				<view class="t-botton">
					<button type="default" @click="tfalse">取消</button>
					<button type="default" @click="sure" style="background-color: rgb(0, 89, 183);">确认</button>
				</view>
			</view>
			<!-- 弹窗 -->
			<view class="success" v-if="sShow">
				<view class="s-top">
					系统提醒
				</view>
				<view class="s-main">
					<text>
						XXX设备XXX操作成功
					</text>
				</view>
				<view class="s-botton">
					<button type="default" @click="sures" style="background-color: rgb(0, 89, 183);">确认</button>
				</view>
			</view>
		</view>
		<view class="mains">
			<view class="no">
				<view class="text">
					<text>未安装</text>
				</view>
				<view class="left">
					风量：
					<text class="right">
						0m³/min
					</text>
				</view>
				<view class="left">
					风压：
					<text class="right">
						0 Pa
					</text>
				</view>
				<view class="left">
					前级电流：
					<text class="right">
						0m³/min
					</text>
				</view>
				<view class="left">
					前级电压：
					<text class="right">
						0 A
					</text>
				</view>
				<view class="left">
					后级电流：
					<text class="right">
						0 V
					</text>
				</view>
				<view class="left">
					后级电压：
					<text class="right">
						0 A
					</text>
				</view>
				<view class="left">
					风量：
					<text class="right">
						0 V
					</text>
				</view>

			</view>
			<view class="no1" v-if="isShow">
				<view class="left">
					风量：
					<text class="right">
						0m³/min
					</text>
				</view>
				<view class="left">
					风压：
					<text class="right">
						0 Pa
					</text>
				</view>
				<view class="left">
					前级电流：
					<text class="right">
						0m³/min
					</text>
				</view>
				<view class="left">
					前级电压：
					<text class="right">
						0 A
					</text>
				</view>
				<view class="left">
					后级电流：
					<text class="right">
						0 V
					</text>
				</view>
				<view class="left">
					后级电压：
					<text class="right">
						0 A
					</text>
				</view>
				<view class="left">
					风量：
					<text class="right">
						0 V
					</text>
				</view>

			</view>
			<view class="button">
				<button class="item" @click="show" style="background-color: rgb(0, 89, 183);" type="default">就地/远程</button>
				<button class="item" @click="show" style="background-color: rgb(219, 48, 17);" type="default">风门开关</button>
				<button class="item" @click="show" style="background-color: rgb(46, 180, 87);" type="default">闸门开关</button>
				<button class="item" @click="show" style="background-color: rgb(247, 178, 46);" type="default">一键倒机</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				oneisShow: false,
				sShow: false,
				maskShow: false,

			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			show() {
				this.oneisShow = true
					this.maskShow =!this.maskShow;
			},
			sure() {
				this.oneisShow = false,
					this.sShow = true
					
			},
			tfalse() {
				this.oneisShow = false
				this.maskShow =!this.maskShow;
			},
			sures() {
				this.sShow = false
				this.maskShow = !this.maskShow;
			},
			part(){
				uni.navigateTo({
				    url: '../partInfo/partInfo'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: rgb(247, 247, 247);
		::-webkit-scrollbar {
		display: none;
		}
	}
	.all{
		      height:100%;
			  // background-color: blue;
		    overflow-x: hidden;
		        overflow-y: scroll;
			
	}
	.mask {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 9;
			background: rgba(0,0,0,0.3);
			-webkit-pointer-events: none;
			-moz-pointer-events: none;
			-ms-pointer-events: none;
			-o-pointer-events: none;
			pointer-events: none;

		}
	.top {
		width: 100%;
		height: 128rpx;
		background-color: white;
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		.back {
			width: 20rpx;
			height: 36rpx;
			position: absolute;
			left: 20rpx;
			left: 50rpx;
			top: 46rpx;
		}

		.text {
		display: block;
		// background-color: pink;
		width: 226rpx;
		height: 128rpx;
		font-size: 36rpx;
		font-weight: bolder;
		letter-spacing: 16.100000381469727rpx;
		font-family: PingFang SC;
		line-height: 128rpx;
		color: rgba(51, 51, 51, 1);
		margin-left: 37%;
		opacity: 1;
		}

	}

	.message {
		width: 90%;
		height: 230rpx;
		background-color: white;
		// position: absolute;
		margin-top: 150rpx;
		margin-left: 5%;
		.tanChuang {
			width: 570rpx;
			height: 412rpx;
			position: absolute;
			background-color: rgb(218, 223, 230);
			margin-left: 8%;
             z-index:999;
			.t-top {
				width: 100%;
				height: 90rpx;
				background-color: rgb(243, 247, 251);
				text-align: center;
				line-height: 90rpx;
				font-size: 32rpx;
				color: rgb(24, 104, 190);
				font-weight: 600;
			}

			.t-main {
				width: 320rpx;
				height: 97rpx;
				// background-color: skyblue;
				margin: 48rpx auto;
				font-size: 32rpx;
				font-weight: 500;
				color: black;
				opacity: 1;
				font-family: PingFang SC;

				text {
					margin-left: 20%;
				}
			}

			.t-botton {
				width: 100%;
				height: 72rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}

			button {
				width: 200rpx;
				height: 100%;
				text-align: center;
				line-height: 72rpx;
				border: 1rpx solid rgba(208, 208, 208, 1);
				opacity: 1;
				border-radius: 12rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				opacity: 1;
			}
		}

		.success {
			width: 570rpx;
			height: 412rpx;
			position: absolute;
			background-color: rgb(218, 223, 230);
			margin-left: 8%;
            z-index: 999;
			.s-top {
				width: 100%;
				height: 90rpx;
				background-color: rgb(243, 247, 251);
				text-align: center;
				line-height: 90rpx;
				font-size: 32rpx;
				color: rgb(24, 104, 190);
				font-weight: 600;
			}

			.s-main {

				// background-color: white;
				width: 318rpx;
				height: 45rpx;
				margin: 0 auto;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 45rpx;
				color: rgba(51, 51, 51, 1);
				opacity: 1;
				margin-top: 86rpx;
			}

			.s-botton {
				width: 506rpx;
				height: 72rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				margin: 60rpx auto;
			}

			button {
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 72rpx;
				border: 1rpx solid rgba(208, 208, 208, 1);
				opacity: 1;
				border-radius: 12rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				opacity: 1;
			}
		}
	}

	.uni-common-mt {
			width: 100%;
			// background-color: pink;
			height: 230rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.uni-form-item {
			height: 60rpx;
		}

		.title {
			width: 128rpx;
			height: 40rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
            margin-left: 4%;
			line-height: 7rpx;
			color: rgba(153, 153, 153, 1);
			opacity: 1;
		}

		.titles {
			width: 128rpx;
			height: 40rpx;
			font-size: 32rpx;
			font-weight: bolder;
			font-family: PingFang SC;
			line-height: 7rpx;
			color: black;
			opacity: 1;
			margin-left: 4%;
		}

		.numbers {
			margin-left: 2%;
			font-size: 28rpx;
		}

	}

	.mains {
		width: 90%;
		// padding-bottom: 345rpx;
		background-color: white;
		margin: -245rpx auto;
	}

	.no {
		width: 95%;
		height: 460rpx;
		// background-color: pink;
		margin: 270rpx auto;
		border: 1rpx solid white;
		border-radius: 4%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		border-bottom: 1rpx solid rgb(247, 247, 247);

		.text {
			width: 100%;
			height: 95rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bolder;
			line-height: 95rpx;
			opacity: 1;
			text-align: center;
			border-bottom: 3rpx solid rgb(247, 247, 247);
		}

		.left {
			width: 100%;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(153, 153, 153, 1);
			opacity: 1;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.right {
			width: 116rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(51, 51, 51, 1);
			opacity: 1;

		}
	}

	.no1 {
		width: 95%;
		height: 440rpx;
		// background-color: pink;
		margin: -260rpx auto;
		border: 1rpx solid white;
		border-radius: 4%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		border-bottom: 1rpx solid rgb(247, 247, 247);

		.left {
			width: 100%;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(153, 153, 153, 1);
			opacity: 1;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.right {
			width: 116rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(51, 51, 51, 1);
			opacity: 1;

		}

	}

	.button {
	
		width: 95%;
		display: flex;
		margin-top: 270rpx;
	    margin-left: 3%;
		justify-content: space-around;

		.item {
			width: 23%;
			height: 63rpx;
			font-size: 22rpx;
			padding: 0rpx;
			font-family: PingFang SC;
			font-weight: 400;
			opacity: 1;
			text-align: center;
		}

	}
</style>
